﻿<!DOCTYPE html>
<html lang="en" style="font-size: 100px;">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title>科室呼叫</title>
    <link rel="stylesheet" type="text/css" href="./call.css">
    <style>
       body {
            padding:0;		
       }
     </style>
    <script type="text/javascript">
        String.prototype.fillStr = function(targetLength, padString) {
            // 获取字符串和填充字符串的长度
            var str = this;
            var padStr = String(typeof padString !== 'undefined' ? padString : ' ');
            var targetLength = Number(targetLength) >> 0; // 转换为正整数
            var padLength = targetLength - str.length; // 计算需要填充的长度
            // 如果targetLength小于等于原字符串长度或者填充字符串为空，则返回原字符串
            if (targetLength <= str.length || padString === null) {
                return String(str);
            }
            // 循环填充字符串直到达到目标长度
            while (padLength > padStr.length) {
                padStr += padStr; // 如果填充字符串长度不够，则重复使用它直到足够长
            }
            // 返回填充后的字符串
            return padStr.slice(0, padLength) + String(str);
        };
        var Utils = (function (dom) {
            return {
                baseUrl: 'http://192.168.194.39:8081',
                useLocalEvent: true,
                getSubQueue: function (subQueueFlag) {
                    // 后面要查询接口，从后端读取
                    var subQueueMap = [
                        {label: '预约', nick: '预', value: 2}
                    ]
                    var currentSubQueue = subQueueMap.find(item => item.value === subQueueFlag)
                    return currentSubQueue || null
                },
                formatPatientName: function (name) {
                    if (name && name.length > 2) {
                        return name.substring(0, 1) + "<span style='" +
                            "    position: relative;\n" +
                            '    padding: 0 0.05rem;\n' +
                            "    line-height: 0;'>*</span>" + name.substring(name.length - 1, name.length)
                    } else if (name && name.length >= 1) {
                        return name.substring(0, 1) + '<span style="' +
                            '    display: inline-block;\n' +
                            '    position: relative;\n' +
                            '    padding: 0 0.05rem;\n' +
                            '    line-height: 0;">*</span>'
                    }
                    return ''
                },
                getQueryParams: function(url) {
                    var splitCharIndex = url.indexOf('?');
                    var params = {};
                    if (splitCharIndex > 0) {
                        var paramsStrArr = url.substring(splitCharIndex + 1).split('&');
                        paramsStrArr.forEach(paramsStr => {
                            var paramName = paramsStr.split('=')[0];
                            params[paramName] = paramsStr.split('=')[1];
                        });
                    }
                    return params;
                },

                findMaxRepeatedSubstring: function(str) {
                    if (str.length >= 10) {
                        if (str.length % 3 === 0) {
                            var firstStr = str.substring(0, str.length / 3)
                            var secondStr = str.substring(str.length / 3, 2 * (str.length / 3))
                            var thirdStr = str.substring(2 * (str.length / 3))
                            if (firstStr === secondStr && thirdStr === secondStr) {
                                return firstStr
                            }
                        }
                        else if (str.length % 2 === 0) {
                            var firstStr = str.substring(0, str.length / 2)
                            var secondStr = str.substring(str.length / 2)
                            if (firstStr === secondStr) {
                                return firstStr
                            }
                        }
                    }
                    return str;
                },
                typeOf: function(obj) {
                    const toString = Object.prototype.toString;
                    const map = {
                        '[object Boolean]': 'boolean',
                        '[object Number]': 'number',
                        '[object String]': 'string',
                        '[object Function]': 'function',
                        '[object Array]': 'array',
                        '[object Date]': 'date',
                        '[object RegExp]': 'regExp',
                        '[object Undefined]': 'undefined',
                        '[object Null]': 'null',
                        '[object Object]': 'object',
                    };
                    return map[toString.call(obj)];
                },
                formatDate: function (date, formatter) {
                    try {
                        formatter = formatter || 'yyyy-MM-dd HH:mm:ss'
                        var _currentDate = this.typeOf(date) === 'number' || this.typeOf(date) === 'string' ? new Date(date) : date
                        var hours = _currentDate.getHours()
                        var minutes = _currentDate.getMinutes()
                        var second = _currentDate.getSeconds()

                        var year = _currentDate.getFullYear()
                        var month = _currentDate.getMonth() + 1
                        var date = _currentDate.getDate()

                        var dateArr = [
                            year,
                            month.toString().fillStr(2, '0'),
                            date.toString().fillStr(2, '0'),
                            hours.toString().fillStr(2, 0),
                            minutes.toString().fillStr(2, '0'),
                            second.toString().fillStr(2, 0)
                        ]
                        if (formatter === 'HH:mm') {
                            return dateArr.slice(3, 5).join(":");
                        } else if (formatter === 'MM-dd') {
                            return dateArr.slice(1, 3).join("-");
                        } else {
                            return dateArr.slice(0, 3).join("-") +" "+ dateArr.slice(3).join(":");
                        }
                    }catch (e){}
                    return ''
                },
                matchCount: function (mainString, substring) {
                    var regex = new RegExp(substring, 'g');
                    var matches = mainString.match(regex);
                    return matches ? matches.length : 0;
                },
                request: function (url, method, data, callback) {
                    // 创建一个新的 XMLHttpRequest 对象
                    var xhr = new XMLHttpRequest();
                    // 设置请求类型和方法
                    xhr.open(method, url, true);
                    // 监听请求状态变化
                    xhr.onreadystatechange = function() {
                        if (xhr.readyState === 4 && xhr.status === 200) {
                            // 请求成功，调用回调函数并传入响应数据
                            callback(null, JSON.parse(xhr.responseText));
                        } else if (xhr.readyState === 4) {
                            // 请求失败，调用回调函数并传入错误信息
                            callback(xhr.statusText, null);
                        }
                    };
                    // 设置请求头（如果需要）
                    xhr.setRequestHeader('Content-Type', 'application/json');
                    // 发送请求
                    if (method && 'POST,PUT'.includes(method.toUpperCase())) {
                        // 发送 POST 请求，并传入数据
                        xhr.send(data);
                    } else {
                        // 发送 GET 请求
                        xhr.send();
                    }
                },
                resetFontSize: function(width, height){
                    var baseWidth = width || 1920
                    var baseHeight = height || 1080
                    var baseFontSize = 100
                    var clientWidth = dom.body.clientWidth
                    var fontSize = Math.min((clientWidth / baseWidth) * baseFontSize, 100) + 'px'
                    document.querySelector('html').style.fontSize = fontSize
                }
            }
        })(document)
        var Api = (function (Utils) {
            return {
                heartbeat: function(callback) {
                    var requestUrl = Utils.baseUrl + '/sse/heartbeat/connect'
                    Utils.request(requestUrl, 'get', null ,function (error, res) {
                        if (!error && res && res.data) {
                            if (callback) {
                                callback(res.data)
                            }
                        }
                    })
                },
                listRoom: function (deviceId, callback) {
                    Utils.request(Utils.baseUrl + '/queue/device/' + deviceId + '/connect/room/list', 'get', null, function(error, res) {
                        callback(res)
                    })
                },
                listPassedPatient: function (deviceId, callback) {
                    Utils.request(Utils.baseUrl + '/queue/device/' + deviceId + '/passed/patient/list', 'get', null, function(error, res) {
                        callback(res)
                    })
                }
            }
        })(Utils)
        var DateTimeRender = (function(Utils, win){
            var _interval = null
            var _currentDate = new Date()
            var _currentTimestamp = 0
            var _oldTimestamp = 0
            var _weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
            var _dateTimeEle = null
            var _sendServerTimeout = 60
            var _renderFun = null

            var _startIntervalTime = function () {
                _interval = setInterval(function() {
                    if (_currentTimestamp > 0) {
                        _currentTimestamp += 1000
                        _currentDate = new Date(_currentTimestamp)
                    } else {
                        _currentDate = new Date();
                        _oldTimestamp = _currentDate.getTime();
                        _currentTimestamp = _currentDate.getTime()
                    }
                    _generatorDate()
                    if (_sendServerTimeout === 0) {
                        _sendServerTimeout = 60
                        _checkServerTime()
                    }
                    _sendServerTimeout--
                }, 1000)
            }


            var _clearIntervalTime = function () {
                if (_interval) {
                    clearInterval(_interval)
                }
            }

            var _checkServerTime = function () {
                Api.heartbeat(function (datetime) {
                    _oldTimestamp = new Date(datetime).getTime()
                    _currentTimestamp = _oldTimestamp
                })
            }

            var _generatorDate = function () {
                var hours = _currentDate.getHours()
                var minutes = _currentDate.getMinutes()
                var second = _currentDate.getSeconds()

                var timeStr = [hours.toString().fillStr(2, '0'), minutes.toString().fillStr(2, '0'), second.toString().fillStr(2, '0')].join(":")

                var year = _currentDate.getFullYear()
                var month = _currentDate.getMonth() + 1
                var date = _currentDate.getDate()

                var dateStr = month.toString().fillStr(2, '0') + '月' + date.toString().fillStr(2, '0') + '日'

                var weekIndex = _currentDate.getDay()
                var weekStr = _weeks[weekIndex];
                if (_dateTimeEle) {
                    _dateTimeEle.innerText = (dateStr + " " + weekStr + " " + timeStr)
                }

                if (_renderFun) {
                    _renderFun([year,
                            month.toString().fillStr(2, '0'),
                            date.toString().fillStr(2, '0'),
                            hours.toString().fillStr(2, 0),
                            minutes.toString().fillStr(2, '0'),
                            second.toString().fillStr(2, 0)],
                        weekStr
                    )
                }
            }

            return {
                render: function (dateTimeEle, renderFun) {
                    _dateTimeEle = dateTimeEle
                    _renderFun = renderFun
                    _checkServerTime()
                    _startIntervalTime()
                }
            }
        })(Utils, window)
        var TTS = (function (win) {
            var _speechTextArr = []
            var _isSpeeching = false
            return {
                sayMessages: function(messages) {
                    if (messages && messages.length) {
                        for(var message of messages) {
                            var speech = new SpeechSynthesisUtterance(message)
                            speech.onend = TTS.onSpeechEnd
                            _speechTextArr.push(speech)
                        }
                    }
                    if (!_isSpeeching) {
                        TTS.onSpeech()
                    }
                },
                onSpeechEnd: function () {
                    _isSpeeching = false
                    if (_speechTextArr && _speechTextArr.length) {
                        TTS.onSpeech()
                    }
                },
                onSpeech: function () {
                    if (!_isSpeeching) {
                        _isSpeeching = true
                        var speechText = _speechTextArr[0]
                        _speechTextArr.splice(0, 1)
                        win.speechSynthesis.speak(speechText);
                    }

                }
            }

        })(window)
        var SSEUtils = (function (Utils) {
            var _sseOpenConnectUrl = "/sse/open/connect"
            var _sseCloseConnectUrl = "/sse/close/connect"
            var _eventSource = null
            var _isConnected = false
            var _clientId = ''
            var _sseInterval = null

            return {
                open: function (clientId, _successCallback) {
                    console.log('sse open:::', clientId)
                    var that = this
                    if (!_eventSource) {
                        var params = Utils.getQueryParams(window.location.href)
                        var clientType = params.client_type
                        var _sseUrl = _sseOpenConnectUrl + '?client_type=' + clientType || 'call_web'
                        console.log('start sse open:::', _sseOpenConnectUrl)
                        _eventSource = new EventSource(Utils.baseUrl + _sseUrl, null);
                        _clientId = clientId
                        _eventSource.onopen = () => {
                            _isConnected = true
                            console.log(' sse opened')
                        }
                        _eventSource.onerror = (error) => {
                            console.log(' sse error:::', error)
                            if (_sseInterval) {
                                clearTimeout(_sseInterval)
                                _sseInterval = null
                            }
                            that.stop()
                            _sseInterval = setTimeout(function () {
                                that.open(clientId, _successCallback)
                            }, 30000)
                        }
                        _eventSource.onmessage = (event) => {
                            console.log(' sse message:::', event.data)
                            let data = null
                            try { data = JSON.parse(event.data) } catch (e) {}
                            if (_successCallback) {
                                _successCallback(data)
                            }
                        }
                    }
                },
                stop: function () {
                    if (_eventSource) {
                        _eventSource.close()
                        _eventSource = null
                    }
                    if (_isConnected) {
                        var params = Utils.getQueryParams(window.location.href)
                        var clientType = params.client_type
                        _sseCloseConnectUrl += '?client_type=' + clientType || 'call_web'
                        Utils.request(Utils.baseUrl + _sseCloseConnectUrl, 'post', null, function(isError, data) {
                            if (!isError && data && data.code === 200 && _eventSource) {}
                        })
                    }
                    _isConnected = false
                }
            }
        })(Utils)
        // 呼叫弹窗
        var CallDialog = (function (Utils, TTS) {
            var _show = false
            var _messages = []
            var _broadcastEngine = TTS
            var showDialog = function () {
                if (_messages && _messages.length) {
                    var message = _messages[0]
                    var dialog = document.querySelector('div#yy-screen-just-call')
                    dialog.querySelector('div.yy-screen-just-call__message').innerHTML = getMessageTemp(message)
                    dialog.removeAttribute("style")
                    // 语音广播
                    _broadcastEngine.sayMessages([getTTSMessageTemp(message)])
                    _messages.splice(0, 1)
                    _show = true
                    setTimeout(function() {
                        showDialog()
                    }, 8000)
                } else {
                    _show = false
                    document.querySelector('div#yy-screen-just-call').setAttribute("style", "display: none;")
                }
            }
            var getMessageTemp = function (data) {
                var subQueue = Utils.getSubQueue(data.subQueueFlag)
                return `
                 <div>请${subQueue ? " " + subQueue.nick + " " : data.registerNo + '号'} ${Utils.formatPatientName(data.patientName)}</div>
                 <div class='scroll-text-box'> <div class='scroll-text-wrapper'> <div class='scroll-text-item'> 到${data.roomName}诊室就诊</div></div> </div>
            `
            }
            var getTTSMessageTemp= function (params, template) {
                var subQueue = Utils.getSubQueue(params.subQueueFlag)
                var defaultTemplate =` *****-***************     请    *****  ${subQueue ? subQueue.label : " ***** #{registerNo}  号"}#{patientName}到#{roomName}诊室就诊`
                var messageTemplate = template ? template : defaultTemplate
                var paramKeys = messageTemplate.match(/#\{[a-z0-9A-Z_]+\}/g)
                if (paramKeys.length) {
                    for(var par of paramKeys) {
                        var paramKey = par.substring(2, par.length - 1)
                        var parReg = new RegExp(par, 'ig')
                        messageTemplate = messageTemplate.replace(parReg, params[paramKey])
                    }
                }
                return messageTemplate
            }

            return {
                setBroadcastEngine: function (broadcastEngine) {
                    if (broadcastEngine) {
                        _broadcastEngine = broadcastEngine
                    }
                    return this
                },
                show: function (data) {
                    var message = {
                        registerNo: data.just[data.just.length - 1].registerNo,
                        patientName: data.just[data.just.length - 1].patientName,
                        roomName: data.roomName,
                        itemName: data.just[data.just.length - 1].departName,
                        subQueueFlag: data.just[data.just.length - 1].subQueueFlag
                    }
                    //弹窗显示
                    _messages.push(message)
                    if (!_show) {
                        showDialog()
                    }
                }
            }
        })(Utils, TTS)
    </script>
    <script type="text/javascript">

        var CallPage = (function (Utils, win, doc, TTS, Api) {
            var _deviceIp = null
            var _deviceRoom = null
            var _appKey = null
            var _appSecret = null
            // 显示数据队列
            var _callData = []
            var _rowCount = 1
            var _pageIndex = 1
            var _pageChangeInterval = 10
            var _passedData = []

            var _messageBroadcast = null
            return {
                _dialogItemChangeInterval: null,
                setMeta: function (deviceIp, appKey, appSecret, messageBroadcast) {
                    _appKey = appKey
                    _appSecret = appSecret
                    _deviceIp = deviceIp
                    _messageBroadcast = messageBroadcast
                },
                setDevice: function (obj, appKey, appSecret, ip) {
                    _deviceRoom = obj || null
                },
                // 查询当前登录的医师及诊室信息列表
                selectCurrentLogin: function () {
                    if (_deviceRoom) {
                        Api.listRoom(_deviceRoom.device.id, function (res) {
                            if (res && res.code === 200) {
                                res.data = res.data || []
                                CallPage.clear()
                                _callData = res.data
                                CallPage.render()
                            }
                            setTimeout(function () {
                                CallPage.selectCurrentLogin()
                            }, 15 * 1000)
                        })
                    }
                },
                // 查询过号患者
                selectPassedPatient: function () {
                    if (_deviceRoom) {
                        Api.listPassedPatient(_deviceRoom.device.id, function (res) {
                            if (res && res.code === 200) {
                                var _newList = [], _delList = []
                                res.data = res.data || []
                                _passedData = _passedData || []
                                _passedData.forEach((item, itemIndex) => {
                                    const index = res.data.findIndex(d => d.id === item.id)
                                    if (index < 0) {
                                        _delList.push(item)
                                        _passedData.splice(itemIndex, 1)
                                    }
                                })
                                res.data.forEach(item => {
                                    const index = _passedData.findIndex(p => p.id === item.id)
                                    if (index < 0) {
                                        _passedData.push(item)
                                        _newList.push(item)
                                    }
                                })
                                CallPage.renderPassed(_newList, _delList)
                            }
                            setTimeout(function () {
                                CallPage.selectPassedPatient()
                            }, 5 * 1000)
                        })
                    }
                },
                call: function (data) {
                    const index = _callData.findIndex(item => item.roomId === data.roomId && item.emplId === data.emplId)
                    if (index >= 0) {
                        _callData[index].just = data.just
                        if (data.await && data.await.length ) {
                            _callData[index].await = data.await
                        }
                        this.renderRow(index, _callData[index])
                        CallDialog.setBroadcastEngine(_messageBroadcast).show(_callData[index])
                    } else {
                        CallPage.add(data)
                    }
                },
                changeEmplStatus: function (data) {
                    const index = _callData.findIndex(item => item.roomId === data.roomId && item.emplId === data.emplId)
                    if (index >= 0) {
                        _callData[index].emplStatus = data.status
                        this.renderRow(index, _callData[index])
                    }
                },
                add: function (data) {
                    const index = _callData.findIndex(item => item.roomId === data.roomId && item.emplId === data.emplId)
                    if (index < 0) {
                        _callData.push(data)
                        CallPage.generateTitle()
                        this.render()
                    }
                },
                remove: function (data) {
                    var index = _callData.findIndex(item => item.roomId === data.roomId && item.emplId === data.emplId)
                    if (index >= 0) {
                        _callData.splice(index, 1)
                        this.clear()
                        this.renderPage()
                    }
                },
                generateTitle: function () {
                    var departNameStr = ''
                    for (var data of _callData) {
                        if (!departNameStr.includes(data.departName)) {
                            if (departNameStr) {
                                departNameStr += ','
                            }
                            departNameStr += data.departName
                        }
                    }
                    if (departNameStr) {
                        document.querySelector('div.yy-screen-header_title > div').style.display = 'none'
                        document.querySelector('div.yy-screen-header_title > div').innerHTML = departNameStr
                    } else {
                        document.querySelector('div.yy-screen-header_title > div').style.display = 'none'
                    }
                },
                init: function () {
                    var dataContainer = document.querySelector('div.yy-screen-content_list')
                    var rowTemplate = document.querySelector('div#html-template-container > div.yy-screen-content_list-row')
                    var containerHeight = dataContainer.getBoundingClientRect().height;
                    var firstRow = document.createElement('div')
                    firstRow.setAttribute('class', 'yy-screen-content_list-row')
                    firstRow.setAttribute('data-index', 0)
                    firstRow.innerHTML = rowTemplate.innerHTML
                    dataContainer.append(firstRow)
                    var rowHeight = firstRow.getBoundingClientRect().height;
                    _rowCount = Math.floor(containerHeight / rowHeight)
                    var otherHeight = containerHeight - _rowCount * rowHeight
                    var perAddHeight = otherHeight / _rowCount
                    for (var i = 1; i < _rowCount; i++) {
                        var row = document.createElement('div')
                        row.setAttribute('data-index', i)
                        row.setAttribute('class', 'yy-screen-content_list-row')
                        row.setAttribute('style', 'height:' + (rowHeight + perAddHeight) + 'px')
                        row.innerHTML = rowTemplate.innerHTML
                        dataContainer.append(row)
                    }
                    return this
                },
                clear: function () {
                    if (CallPage._dialogItemChangeInterval) {
                        clearTimeout(CallPage._dialogItemChangeInterval)
                        CallPage._dialogItemChangeInterval = null
                    }
                    var dataContainer = document.querySelector('div.yy-screen-content_list')
                    for (var i = 0; i < _rowCount; i++) {
                        var rowContainer = dataContainer.querySelector('div[data-index="'+i+'"]')
                        var rowRoomEle = rowContainer.querySelector('div.yy-screen-content_column:nth-child(1)')
                        rowRoomEle.innerText = ''
                        var rowItemEle = rowContainer.querySelector('div.yy-screen-content_column:nth-child(2)')
                        rowItemEle.innerText = ''
                        var rowEmplEle = rowContainer.querySelector('div.yy-screen-content_column:nth-child(3)')
                        rowEmplEle.innerText = ''
                        var rowJustEle = rowContainer.querySelector('div.yy-screen-content_column:nth-child(4)')
                        rowJustEle.innerHTML = ''
                        var rowAwaitEle = rowContainer.querySelector('div.yy-screen-content_column:nth-child(5)')
                        rowAwaitEle.innerHTML = ''
                    }
                    return this
                },
                removeUI: function () {
                    if (CallPage._dialogItemChangeInterval) {
                        clearTimeout(CallPage._dialogItemChangeInterval)
                        CallPage._dialogItemChangeInterval = null
                    }
                    var dataContainer = document.querySelector('div.yy-screen-content_list')
                    dataContainer.innerHTML = ""
                    return this
                },
                renderRow: function (index, rowData) {
                    var dataContainer = document.querySelector('div.yy-screen-content_list')
                    var rowContainer = dataContainer.querySelector('div[data-index="'+(index % _rowCount)+'"]')
                    var rowRoomEle = rowContainer.querySelector('div.yy-screen-content_column:nth-child(1)')
                    rowRoomEle.innerHTML = `<div class='scroll-text-box'> <div class='scroll-text-wrapper'> <div class='scroll-text-item'>${rowData.roomName}</div></div></div>`
                    var rowItemEle = rowContainer.querySelector('div.yy-screen-content_column:nth-child(2)')
                    rowItemEle.innerText = rowData.itemName
                    var rowEmplEle = rowContainer.querySelector('div.yy-screen-content_column:nth-child(3)')
                    var prefix = "";
                    if (rowData.emplStatus === 0) {
                        prefix = "(<span style=''>暂停</span>)"
                    }
                    rowEmplEle.innerHTML = rowData.emplName + prefix

                    var rowJustEle = rowContainer.querySelector('div.yy-screen-content_column:nth-child(4)')
                    if (rowData.just && rowData.just.length > 0) {
                        var rowJustEleHtml = '<span>';
                        var justData = rowData.just[rowData.just.length - 1]
                        if (justData.subQueueFlag === 7) {
                            rowJustEleHtml += `<span style="display: inline-block; margin-right: 0.08rem;">VIP</span>`
                        } else  if (justData.subQueueFlag === 6) {
                            rowJustEleHtml += `<span style="display: inline-block; margin-right: 0.08rem;">优</span>`
                        } else if (justData.subQueueFlag === 3) {
                            rowJustEleHtml += `<span style="display: inline-block; margin-right: 0.08rem;">回</span>`
                        } else if(justData.scheduleFlag) {
                            rowJustEleHtml += `<span style="display: inline-block; margin-right: 0.08rem;">预</span>`
                        } else {
                            rowJustEleHtml += justData.registerNo  + "号 "
                        }
                        rowJustEleHtml += `<span style="display: inline-block; margin-left: 0.1rem;">${Utils.formatPatientName(justData.patientName)}</span>`
                        // if (justData.scheduleFlag && justData.scheduleSignState && +justData.scheduleSignState === 3) {
                        //     rowJustEleHtml+= `(迟到)`
                        // }
                        rowJustEleHtml += '</span>';
                        rowJustEle.innerHTML = rowJustEleHtml
                    } else {
                        rowJustEle.innerHTML = ''
                    }
                    var rowAwaitEle = rowContainer.querySelector('div.yy-screen-content_column:nth-child(5)')
                    var rowAwaitEleHtml = '';
                    if (rowData.await && rowData.await.length > 0) {
                        var len = Math.min(2, rowData.await.length)
                        for(let j = 0; j < len; j++) {
                            rowAwaitEleHtml += '<span>'
                            if (rowData.await[j].subQueueFlag === 7) {
                                rowAwaitEleHtml += `<span style="display: inline-block; margin-right: 0.08rem;">VIP</span>`
                            } else  if (rowData.await[j].subQueueFlag === 6) {
                                rowAwaitEleHtml += `<span style="display: inline-block; margin-right: 0.08rem;">优</span>`
                            } else if (rowData.await[j].subQueueFlag === 3) {
                                rowAwaitEleHtml += `<span style="display: inline-block; margin-right: 0.08rem;">回</span>`
                            }  else if (rowData.await[j].scheduleFlag) {
                                rowAwaitEleHtml += `<span style="display: inline-block; margin-right: 0.08rem;">预</span>`
                            } else {
                                rowAwaitEleHtml += `<span style="display: inline-block; margin-right: 0.08rem;">${rowData.await[j].registerNo  + "号 "}</span>`
                            }

                            rowAwaitEleHtml += `<span>${Utils.formatPatientName(rowData.await[j].patientName)}</span>`

                            // if (rowData.await[j].scheduleFlag && rowData.await[j].scheduleSignState && +rowData.await[j].scheduleSignState === 3) {
                            //     rowAwaitEleHtml += `<span>(迟到)</span>`
                            // }

                            if (rowData.await[j].passedFlag == 1) {
                                rowAwaitEleHtml += "(过)"
                            }
                            rowAwaitEleHtml += '</span>'
                        }
                        rowAwaitEle.innerHTML = rowAwaitEleHtml
                    } else {
                        rowAwaitEle.innerHTML = ''
                    }
                },
                renderPassed: function (passed, delList) {
                    if (_passedData && _passedData.length > 0) {
                        document.querySelector("div.yy-screen-content-warning--passed").style.display = 'inline-flex'
                    } else {
                        document.querySelector("div.yy-screen-content-warning--passed").style.display = 'none'
                    }

                    if (delList && delList.length > 0) {
                        var preList = document.querySelectorAll("div.yy-screen-content-warning--passed > pre")
                        for (var i = 0; i < preList.length; i++) {
                            var pre = preList[i]
                            for (var j = 0; j < delList.length; j++) {
                                document.getElementById(delList[j].id + "_" + i).remove()
                            }
                        }

                        CallPage.removeUI().init().render()
                    }
                    if (passed && passed.length > 0) {
                        var preList = document.querySelectorAll("div.yy-screen-content-warning--passed > pre")
                        for (var i = 0; i < preList.length; i++) {
                            var pre = preList[i]
                            for (var j = 0; j < passed.length; j++) {
                                var patientName = Utils.formatPatientName(passed[j].patientName)
                                if(passed[j].scheduleFlag) {
                                    patientName = '预 ' + patientName
                                }  else if (passed[j].subQueueFlag === 3) {
                                    patientName = '回 ' + patientName
                                } else {
                                    patientName = `${passed[j].registerNo}号 ` + patientName
                                }
                                pre.innerHTML += ` <span id="${passed[j].id + "_" + i}" style="display: inline-block; padding: 0 0.05rem;margin-right:0.4rem;">${patientName} (过号)</span>`
                            }
                        }
                        CallPage.removeUI().init().render()
                    }
                },
                renderPage: function () {
                    var dataList = _callData.slice((_pageIndex - 1) * _rowCount , (_pageIndex - 1) * _rowCount + _rowCount)
                    for (var i = 0; i < dataList.length; i++) {
                        this.renderRow(i, dataList[i])
                    }
                    return this
                },
                render: function () {
                    var that = this
                    var pageCount = _callData.length % _rowCount === 0 ? _callData.length / _rowCount : Math.ceil(_callData.length / _rowCount)
                    if(_pageIndex > 1) {
                        this.clear()
                    }
                    this.generateTitle()
                    this.renderPage()
                    if (_pageIndex + 1 <= pageCount) {
                        _pageIndex += 1
                    } else {
                        _pageIndex = 1
                    }
                    if (pageCount > 1) {
                        CallPage._dialogItemChangeInterval = setTimeout(function () {
                            that.render()
                        }, _pageChangeInterval * 1000)
                    }
                }
            }

        })(Utils, window, document, TTS, Api)
        window.onload = function () {

            var params = Utils.getQueryParams(window.location.href)
            if (params) {
                if (params.server_url) {
                    Utils.baseUrl = params.server_url
                }
                if (params.customer_title) {
                    document.querySelector('div.yy-screen-header_customer div.customer-title').innerHTML = decodeURIComponent(params.customer_title)
                }
                if (params.customer_logo) {
                    document.querySelector('div.yy-screen-header_customer div.customer-logo > img').setAttribute("src", decodeURIComponent(params.customer_logo))
                    document.querySelector('div.yy-screen-header_customer div.customer-logo').style.display = ''
                } else {
                    document.querySelector('div.yy-screen-header_customer div.customer-logo').style.display = 'none'
                }
                CallPage.setMeta(params.client_id, params.app_key, params.app_secret, window.Android)
            }

            DateTimeRender.render(document.querySelector("div.yy-screen-header_time"))
            Utils.resetFontSize()
            SSEUtils.open(params.ip, function callback(res) {
                if (res.action === "SSE_CONNECTED") {
                    CallPage.setDevice(res.data)
                    CallPage.selectCurrentLogin()
                    CallPage.selectPassedPatient()
                }
                if (res.action === "SSE_EMPLOYEE_LOGIN") {
                    res.data && CallPage.add(res.data)
                } else if (res.action === 'SSE_EMPLOYEE_LOGOUT') {
                    res.data && CallPage.remove(res.data)
                } else if (res.action === 'SSE_EMPLOYEE_CALL_CHANGE') {
                    res.data && CallPage.call(res.data)
                } else if (res.action === 'SSE_EMPLOYEE_STATUS_CHANGE') {
                    // 医生状态改变
                    CallPage.changeEmplStatus(res.data);
                }
            })

            CallPage.init().render()
            window.onresize = function () {
                Utils.resetFontSize()
                CallPage.removeUI().init().render()
            }
            window.onbeforeunload = function () {
                SSEUtils.stop()
            }
        }

    </script>
</head>
<body class="yy-call">
  <div class="yy-screen-header">
      <div class="yy-screen-header_customer">
          <div class="customer-logo" style="width: 1rem; height: 1rem;margin-right: 0.1rem;">
              <img style="width:100%;" />
          </div>
          <div class="customer-title">
          </div>
      </div>
      <div class="yy-screen-header_title">
         <div></div>
      </div>
      <div class="yy-screen-header_time"></div>
  </div>
  <div class="yy-screen-content">
      <div class="yy-screen-content_header">
         <div class="yy-screen-content_column yy-screen-content_column--room">诊室</div>
         <div class="yy-screen-content_column yy-screen-content_column--per">科室</div>
         <div class="yy-screen-content_column yy-screen-content_column--doc">医师</div>
         <div class="yy-screen-content_column yy-screen-content_column--per yy-screen-content_header--just">就诊中</div>
         <div class="yy-screen-content_column yy-screen-content_header--await">等待就诊</div>
      </div>
      <div class="yy-screen-content_list">
          
      </div>
  </div>
  <div class="yy-screen-content-warning yy-screen-content-warning--passed marquee" style="background:rgba(254,240,197, 1); height:0.6rem;font-size:0.4rem; display:none; align-items: center;">
     <pre></pre>
     <pre></pre>
  </div>
  <div class="yy-screen-footer">
      <div class="yy-screen-footer_company"></div>
      <div class="yy-screen-footer_text marquee" id="scrollText">
<!--          <pre>请先签到再就诊。  过号、回诊请重新签到。</pre>-->
<!--          <pre>请先签到再就诊。  过号、回诊请重新签到。</pre>-->
          <span style="font-size: 0.32rem">门诊挂号成功的患者，请至自助签到机上就诊签到，过号、回诊请重新签到。签到后请耐心等待医生叫号，有序就诊，谢谢配合！</span>
      </div>
  </div>

  <div id="yy-screen-just-call" style="display: none;">
      <div class="yy-screen-just-call__message"></div>
  </div>
  <div id="html-template-container" style="display: none; position: absolute; z-index: -1; width: 0;height: 0; overflow: hidden;">
      <div class="yy-screen-content_list-row">
          <div class="yy-screen-content_column yy-screen-content_column--room"></div>
          <div class="yy-screen-content_column yy-screen-content_column--per"></div>
          <div class="yy-screen-content_column yy-screen-content_column--doc"></div>
          <div class="yy-screen-content_column yy-screen-content_column--per yy-screen-content_column--just"></div>
          <div class="yy-screen-content_column yy-screen-content_column--await"> </div>
      </div>
  </div>
</body>
</html>